<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图库管理 - 后台管理系统</title>
    <link rel="stylesheet" href="../styles/styles-main.css">
    <link rel="stylesheet" href="../styles/gallery.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="../modules/module-loader.js"></script>
    <script src="../modules/core-modules.js"></script>
    <script>
        // 动态加载图库管理所需模块
        document.addEventListener('DOMContentLoaded', async function() {
            try {
                await moduleLoader.loadModules([
                    ['api-client', '../scripts/api-client.js'],
                    ['navbar-main', '../scripts/navbar-main.js'],
                    ['gallery', '../scripts/gallery.js']
                ]);
                
                // 初始化图库管理
                if (typeof GalleryManager !== 'undefined') {
                    const galleryManager = new GalleryManager();
                    galleryManager.init();
                }
            } catch (error) {
                console.error('模块加载失败:', error);
            }
        });
    </script>
</head>
<body>
    <div id="navbar-container"></div>
    
    <div class="container">
        <div class="gallery-container">
            <!-- 页面标题和操作栏 -->
            <div class="gallery-header">
                <h1><i class="fas fa-images"></i> 图库管理</h1>
                <div class="gallery-actions">
                    <button class="btn-primary" onclick="showUploadModal()">
                        <i class="fas fa-upload"></i> 上传图片
                    </button>
                    <button class="btn-secondary" onclick="showUsageStats()">
                        <i class="fas fa-chart-pie"></i> 使用统计
                    </button>
                </div>
            </div>

            <!-- 筛选和搜索栏 -->
            <div class="gallery-filters">
                <div class="filter-group">
                    <select id="categoryFilter" onchange="filterGallery()">
                        <option value="">所有分类</option>
                        <option value="product">产品图片</option>
                        <option value="banner">横幅图片</option>
                        <option value="logo">Logo图片</option>
                        <option value="background">背景图片</option>
                        <option value="other">其他图片</option>
                    </select>
                    
                    <select id="usageTypeFilter" onchange="filterGallery()">
                        <option value="">所有用途</option>
                        <option value="carousel">轮播图</option>
                        <option value="featured">首页精选</option>
                        <option value="about">关于我们</option>
                        <option value="blog">博客创作</option>
                        <option value="product">产品管理</option>
                        <option value="general">通用图片</option>
                    </select>
                    
                    <select id="statusFilter" onchange="filterGallery()">
                        <option value="">所有状态</option>
                        <option value="active">已启用</option>
                        <option value="inactive">已禁用</option>
                    </select>
                </div>
                
                <div class="search-group">
                    <input type="text" id="searchInput" placeholder="搜索图片名称、描述或标签..." onkeyup="filterGallery()">
                    <button class="btn-search" onclick="filterGallery()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>



            <!-- 图片网格展示 -->
            <div class="gallery-grid" id="galleryGrid">
                <!-- 图片卡片将通过JavaScript动态加载 -->
            </div>

            <!-- 分页控件 -->
            <div class="pagination" id="pagination">
                <!-- 分页将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- 图片上传模态框 -->
    <div id="uploadModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-upload"></i> 上传图片</h3>
                <button class="close-btn" onclick="closeUploadModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form id="uploadForm">
                    <div class="form-group">
                        <label for="imageFile">选择图片文件</label>
                        <div class="file-upload-area" id="fileUploadArea">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>拖拽图片到这里或点击选择文件</p>
                            <input type="file" id="imageFile" accept="image/*" multiple style="display: none;">
                            <button type="button" class="btn-secondary" onclick="document.getElementById('imageFile').click()">
                                选择文件
                            </button>
                        </div>
                        <div id="fileList" class="file-list"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="imageName">图片名称 *</label>
                        <input type="text" id="imageName" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="imageDescription">图片描述</label>
                        <textarea id="imageDescription" rows="3" placeholder="请输入图片描述..."></textarea>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="imageCategory">分类</label>
                            <select id="imageCategory">
                                <option value="">请选择分类</option>
                                <option value="product">产品图片</option>
                                <option value="banner">横幅图片</option>
                                <option value="logo">Logo图片</option>
                                <option value="background">背景图片</option>
                                <option value="other">其他图片</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="imageUsageType">用途类型</label>
                            <select id="imageUsageType">
                                <option value="general">通用图片</option>
                                <option value="carousel">轮播图</option>
                                <option value="featured">首页精选</option>
                                <option value="about">关于我们</option>
                                <option value="blog">博客创作</option>
                                <option value="product">产品管理</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="imageTags">标签（用逗号分隔）</label>
                        <input type="text" id="imageTags" placeholder="例如：产品,宣传,首页">
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="imageActive" checked>
                            <span class="checkmark"></span>
                            启用图片
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" onclick="closeUploadModal()">取消</button>
                <button class="btn-primary" onclick="uploadImages()">上传图片</button>
            </div>
        </div>
    </div>

    <!-- 图片编辑模态框 -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 编辑图片信息</h3>
                <button class="close-btn" onclick="closeEditModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editImageId">
                    
                    <div class="form-group">
                        <label>预览图片</label>
                        <div class="image-preview" id="editImagePreview">
                            <img id="editImageUrl" src="" alt="预览图片">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="editImageName">图片名称 *</label>
                        <input type="text" id="editImageName" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="editImageDescription">图片描述</label>
                        <textarea id="editImageDescription" rows="3"></textarea>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="editImageCategory">分类</label>
                            <select id="editImageCategory">
                                <option value="">请选择分类</option>
                                <option value="product">产品图片</option>
                                <option value="banner">横幅图片</option>
                                <option value="logo">Logo图片</option>
                                <option value="background">背景图片</option>
                                <option value="other">其他图片</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="editImageUsageType">用途类型</label>
                            <select id="editImageUsageType">
                                <option value="general">通用图片</option>
                                <option value="carousel">轮播图</option>
                                <option value="featured">首页精选</option>
                                <option value="about">关于我们</option>
                                <option value="blog">博客创作</option>
                                <option value="product">产品管理</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="editImageTags">标签（用逗号分隔）</label>
                        <input type="text" id="editImageTags" placeholder="例如：产品,宣传,首页">
                    </div>
                    
                    <div class="form-group">
                        <label for="editImageSortOrder">排序权重</label>
                        <input type="number" id="editImageSortOrder" min="0" value="0">
                        <small>数字越小排序越靠前</small>
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="editImageActive">
                            <span class="checkmark"></span>
                            启用图片
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-danger" onclick="deleteImage()">删除图片</button>
                <button class="btn-secondary" onclick="closeEditModal()">取消</button>
                <button class="btn-primary" onclick="saveImageChanges()">保存更改</button>
            </div>
        </div>
    </div>

    <!-- 使用统计模态框 -->
    <div id="statsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-chart-pie"></i> 图库使用统计</h3>
                <button class="close-btn" onclick="closeStatsModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="stats-container">
                    <div class="stats-grid">
                        <div class="stat-item">
                            <h4>分类统计</h4>
                            <div id="categoryStats" class="stats-chart"></div>
                        </div>
                        <div class="stat-item">
                            <h4>用途统计</h4>
                            <div id="usageStats" class="stats-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 轮番图上传模态框 -->
    <div id="carouselUploadModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-plus"></i> 添加轮番图</h3>
                <button class="close-btn" onclick="closeCarouselUploadModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form id="carouselUploadForm">
                    <div class="form-group">
                        <label for="carouselImageFile">选择轮番图文件</label>
                        <div class="file-upload-area" id="carouselFileUploadArea">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>拖拽轮番图到这里或点击选择文件</p>
                            <input type="file" id="carouselImageFile" accept="image/*" multiple style="display: none;">
                            <button type="button" class="btn-secondary" onclick="document.getElementById('carouselImageFile').click()">
                                选择文件
                            </button>
                        </div>
                        <div id="carouselFileList" class="file-list"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="carouselImageName">轮番图名称 *</label>
                        <input type="text" id="carouselImageName" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="carouselImageDescription">轮番图描述</label>
                        <textarea id="carouselImageDescription" rows="3" placeholder="请输入轮番图描述..."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="carouselImageActive" checked>
                            <span class="checkmark"></span>
                            立即启用轮番图
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" onclick="closeCarouselUploadModal()">取消</button>
                <button class="btn-primary" onclick="uploadCarouselImages()">上传轮番图</button>
            </div>
        </div>
    </div>

    <!-- 轮番图预览模态框 -->
    <div id="carouselPreviewModal" class="modal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3><i class="fas fa-eye"></i> 轮番图预览</h3>
                <button class="close-btn" onclick="closeCarouselPreviewModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="preview-container">
                    <img id="carouselPreviewImg" src="" alt="轮番图预览" class="preview-image">
                    <div id="carouselPreviewInfo" class="preview-info"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-secondary" onclick="closeCarouselPreviewModal()">关闭</button>
            </div>
        </div>
    </div>

    <!-- 轮番图编辑模态框 -->
    <div id="editCarouselModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3><i class="fas fa-edit"></i> 编辑轮番图</h3>
                <button class="close-btn" onclick="closeEditCarouselModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form id="editCarouselForm">
                    <input type="hidden" id="editCarouselImageId">
                    
                    <div class="form-group">
                        <label>预览轮番图</label>
                        <div class="image-preview" id="editCarouselImagePreview">
                            <img id="editCarouselImageUrl" src="" alt="轮番图预览">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="editCarouselImageName">轮番图名称 *</label>
                        <input type="text" id="editCarouselImageName" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="editCarouselImageDescription">轮番图描述</label>
                        <textarea id="editCarouselImageDescription" rows="3"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="editCarouselImageActive">
                            <span class="checkmark"></span>
                            启用轮番图
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn-danger" onclick="deleteCarouselImage()">删除轮番图</button>
                <button class="btn-secondary" onclick="closeEditCarouselModal()">取消</button>
                <button class="btn-primary" onclick="saveCarouselChanges()">保存更改</button>
            </div>
        </div>
    </div>

    <!-- 加载遮罩 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>加载中...</p>
        </div>
    </div>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航栏
            const navbarManager = new NavbarManager();
            
            // 初始化图库管理器
            if (typeof galleryManager !== 'undefined') {
                galleryManager.init();
            }
            
            // 设置文件上传事件
            setupFileUpload();
        });
    </script>
</body>
</html>